<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="Dashboard">
<meta name="keyword"
	content="Dashboard, Bootstrap, Admin, Template, Theme, Responsive, Fluid, Retina">
<title>Dashio - Bootstrap Admin Template</title>
<!-- Favicons -->
<link href="../img/favicon.png" rel="icon">
<link href="../img/apple-touch-icon.png" rel="apple-touch-icon">
<!-- Bootstrap core CSS -->
<link href="../lib/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!--external css-->
<link href="../lib/font-awesome/css/font-awesome.css" rel="stylesheet" />
<link rel="stylesheet" type="text/css" href="../css/zabuto_calendar.css">
<link rel="stylesheet" type="text/css"
	href="../lib/gritter/css/jquery.gritter.css" />
<!-- Custom styles for this template -->
<link href="../css/style.css" rel="stylesheet">
<link href="../css/style-responsive.css" rel="stylesheet">
<script src="../lib/chart-master/Chart.js"></script>

<!-- =======================================================
    Template Name: Dashio
    Template URL: https://templatemag.com/dashio-bootstrap-admin-template/
    Author: TemplateMag.com
    License: https://templatemag.com/license/
  ======================================================= -->
</head>

<body>
	<section id="container">
		<!-- **********************************************************************************************************************************************************
        TOP BAR CONTENT & NOTIFICATIONS
        *********************************************************************************************************************************************************** -->
		<!--header start-->
		<header class="header black-bg">
			<div class="sidebar-toggle-box">
				<div class="fa fa-bars tooltips" data-placement="right"
					data-original-title="Toggle Navigation"></div>
			</div>
			<!--logo start-->
			<a href="index.jsp" class="logo"><b>BES<span>Manage</span></b></a>
			<!--logo end-->
		
			<div class="top-menu">
				<ul class="nav pull-right top-menu">
					 <li><a class="logout" href="${pageContext.request.contextPath }/UserController?op=exit">退出登录</a></li>
				</ul>
			</div>
		</header>
		<!--header end-->
		<!-- **********************************************************************************************************************************************************
        MAIN SIDEBAR MENU
        *********************************************************************************************************************************************************** -->
		<!--sidebar start-->
		<aside>
			<div id="sidebar" class="nav-collapse ">
				<!-- sidebar menu start-->
				<ul class="sidebar-menu" id="nav-accordion">
					<p class="centered"><a href="index.jsp">
			        	<!--管理员头像-->
			          <!-- 默认头像 -->
						<c:if test="${sessionScope.backUser.u_img ==null}">
							<img  src="${pageContext.request.contextPath }/images/ui-sam.jpg" class="img-circle" width="80" />
						</c:if>
						<!-- 自定义头像 -->
						<c:if test="${sessionScope.backUser.u_img !=null}">
							<img  src="${pageContext.request.contextPath }/DownloadServlet?fileName=${sessionScope.backUser.u_img}"  class="img-circle" width="80" />
						</c:if>
			          </a></p>
			          <!--管理员名-->
			          <h5 class="centered">${sessionScope.backUser.u_name}</h5>
					<li class="mt"><a href="index.jsp"> <i
							class="fa fa-dashboard"></i> <span>公司信息</span>
					</a></li>
					<li class="sub-menu"><a href="javascript:;"> <i
							class="fa fa-desktop"></i> <span>用户管理</span>
					</a>
						<ul class="sub">
							<li><a href="${pageContext.request.contextPath }/back/user-information.jsp">用户信息</a></li>
							<li><a href="${pageContext.request.contextPath }/back/adduser.jsp">添加用户</a></li>
						</ul></li>
					<li class="sub-menu"><a class="active" href="javascript:;"> <i
							class="fa fa-tasks"></i> <span>车次管理</span>
					</a>
						<ul class="sub">
							<li class="active"><a href="${pageContext.request.contextPath }/back/bus-information.jsp">车次信息</a></li>
							<li><a href="${pageContext.request.contextPath }/back/moment-information.jsp">时刻信息</a></li>
							<li><a href="${pageContext.request.contextPath }/back/addmoment.jsp">添加时刻表</a></li>
							<li><a href="${pageContext.request.contextPath }/back/addsite.jsp">添加车次</a></li>
						</ul></li>
					<li class="sub-menu"><a href="javascript:;"> <i
							class="fa fa-th"></i> <span>站点管理</span>
					</a>
						<ul class="sub">
							<li><a href="${pageContext.request.contextPath }/back/bussite-information.jsp">站点信息</a></li>
							<li><a href="${pageContext.request.contextPath }/back/addbussite.jsp">添加站点</a></li>
							<li><a href="${pageContext.request.contextPath }/back/addbusSites.jsp">新增站点</a></li>
						</ul></li>

					<li class="sub-menu"><a href="javascript:;"> <i
							class="fa fa-comments-o"></i> <span>公告栏管理</span>
					</a>
						<ul class="sub">
							<li><a href="${pageContext.request.contextPath }/back/announcement.jsp">公告栏信息</a></li>
						</ul></li>
					<li>
						 <a href="${pageContext.request.contextPath }/back/baidu_maps.jsp">
				              <i class="fa fa-map-marker"></i>
				              <span>百度地图</span>
				              </a>
					</li>
				</ul>
				<!-- sidebar menu end-->
			</div>
			<!--sidebar start-->
		</aside>
		<!--sidebar end-->
		<!--main content start-->
		<section id="main-content">
			<section class="wrapper">
				<!-- row -->
				<div class="row mt">
					<div class="col-md-12">
						<div class="content-panel">
							<table class="table table-striped table-advance table-hover">
								<h4>
									<i class="fa fa-angle-right"></i>车次列表
								</h4>
								<hr>
								<thead>
									<tr>
										<th>车辆编号</th>
										<th>起始站</th>
										<th>终点站</th>
										<th>票价</th>
										<th>时刻</th>
										<th><i class=" fa fa-edit"></i>操作</th>
									</tr>
								</thead>
								<tbody id="busListBody">
									<!-- <tr>
										<td>1</td>
										<td>三爻</td>
										<td>小寨</td>
										<td>2</td>
										<td>am8:00~pm10:00</td>
										<td>
											<button class="btn btn-success btn-xs">
												<i class="fa fa-check"></i>
											</button>
											<button class="btn btn-primary btn-xs">
												<i class="fa fa-pencil"></i>
											</button>
											<button class="btn btn-danger btn-xs">
												<i class="fa fa-trash-o "></i>
											</button>
										</td>
									</tr> -->

								</tbody>
							</table>
							<!-- 分页信息 -->
							<div id="pageStyle"></div>
							<!-- 分页实现    -->
							<div class="col-md-12 text-center">
								<!-- 设置居中 -->
								<ul class="pagination" id="pageItem">

								</ul>
							</div>
						</div>
						<!-- /content-panel -->
					</div>
					<!-- /col-md-12 -->
				</div>
				<!-- /row -->
			</section>
		</section>
		<!--main content end-->
		<!--footer start-->
		<footer class="site-footer">
			<div class="text-center">
				<p>
					&copy; Copyrights <strong>Dashio</strong>. All Rights Reserved
				</p>
				<div class="credits">
					Created with Dashio template by <a href="https://templatemag.com/">TemplateMag</a>
				</div>
				<a href="index.jsp#" class="go-top"> <i class="fa fa-angle-up"></i>
				</a>
			</div>
		</footer>
		<!--footer end-->
	</section>
	<!-- 模态框 -->
	<div class="modal fade" id="myModal" tabindex="-1" role="dialog"
		aria-labelledby="myModalLabel" aria-hidden="true">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal"
						aria-hidden="true">&times;</button>
					<h4 class="modal-title" id="myModalLabel">车辆信息修改</h4>
				</div>
				<form class="form-horizontal" role="form">
					<div class="modal-body">
						<div class="form-group ">
							<label for="lastname" class="control-label col-lg-4">车辆编号
							</label>
							<div class="col-lg-6">
								<input class="form-control" id=b_id name="b_id"
									type="text" readonly="readonly" />
							</div>
						</div>
						<div class="form-group">
							<label for="firstname" class="control-label col-lg-4">首班车</label>
							<div class="col-lg-6">
								<input class=" form-control" id="b_begin" name="b_begin"
									type="text" />
							</div>
						</div>
						<div class="form-group ">
							<label for="password" class="control-label col-lg-4">末班车</label>
							<div class="col-lg-6">
								<input class="form-control " id="b_end" name="b_end"
									type="text" />
							</div>
						</div>
						<div class="form-group ">
							<label for="lastname" class="control-label col-lg-4">票价</label>
							<div class="col-lg-6">
								<input class="form-control" id="b_price" name="b_price"
									type="text" />
							</div>
						</div>
						<div class="form-group ">
							<label for="confirm_sex" class="control-label col-lg-4">时刻</label>
							<div class="col-lg-6">
								<input class="form-control" id="b_data" name="b_data"
									type="text" />
							</div>
						</div>
						<div class="modal-footer">
							<button type="button" class="btn btn-default"
								data-dismiss="modal">关闭</button>
							<button type="button" class="btn btn-primary" id="updatebtn">提交更改</button>
						</div>
					</div>
				</form>
			</div>
			<!-- /.modal-content -->
		</div>
		<!-- /.modal -->
	</div>
	<!-- js placed at the end of the document so the pages load faster -->
	<script src="../lib/jquery/jquery.min.js"></script>

	<script src="../lib/bootstrap/js/bootstrap.min.js"></script>
	<script class="include" type="text/javascript"
		src="../lib/jquery.dcjqaccordion.2.7.js"></script>
	<script src="../lib/jquery.scrollTo.min.js"></script>
	<script src="../lib/jquery.nicescroll.js" type="text/javascript"></script>
	<script src="../lib/jquery.sparkline.js"></script>
	<!--common script for all pages-->
	<script src="../lib/common-scripts.js"></script>
	<script type="text/javascript"
		src="../lib/gritter/js/jquery.gritter.js"></script>
	<script type="text/javascript" src="../lib/gritter-conf.js"></script>
	<!--script for this page-->
	<script src="../lib/sparkline-chart.js"></script>
	<script src="../lib/zabuto_calendar.js"></script>
</body>
<script type="text/javascript">
    //声明全局变量
    var key="";
    $(function(){
	    //赋值动作,各种监听事件
	    //界面一进来就需要发送ajax请求车辆信息
	    $.get("${pageContext.request.contextPath }/BusController",{op:"busByPage_ajax"},function(result){
		    //显示数据写成一个方法,以后就不用在做拼接
		     showData(result);
	        },"json")
	    //首页   
	    $(document).on("click",".first",function(){
			//发送ajax请求
			$.get("${pageContext.request.contextPath}/BusController",
					{
						op:"busByPage_ajax",
						pageNo:1,
						pageSize:10,
						titleLike:key
					},
					function(result){
						//将html拼接写成方法
						showData(result);
						},"json")
		})
		//末页
		$(document).on("click",".last",function(){
			var totalPage=$("#totalPage").text();
			//发送ajax请求
			$.get("${pageContext.request.contextPath}/BusController",
				{
					op:"busByPage_ajax",
					pageNo:totalPage,
					pageSize:10,
					titleLike:key
				},
					function(result){
					//将html拼接写成方法
					showData(result);
					},"json")
		})
		//下一页
		$(document).on("click",".next",function(){
			var pageNo=$("#PageNo").text();
			//发送ajax请求
			$.get("${pageContext.request.contextPath}/BusController",
				{
					op:"busByPage_ajax",
					pageNo:(parseInt(pageNo))+1,
					pageSize:10,
					titleLike:key
				},
				function(result){
					//将html拼接写成方法
					showData(result);
				},"json")
		})
		//上一页
		$(document).on("click",".up",function(){
			var pageNo=$("#PageNo").text();
			//发送ajax请求
			$.get("${pageContext.request.contextPath}/BusController",
				{
					op:"busByPage_ajax",
					pageNo:(parseInt(pageNo))-1,
					pageSize:10,
					titleLike:key
				},
				function(result){
					//将html拼接写成方法
					showData(result);
				},"json")
		})
		//指定页
		$(document).on("click",".currentPage",function(){
			var pageNo=$(this).text();
			//发送ajax请求
			$.get("${pageContext.request.contextPath}/BusController",
				{
					op:"busByPage_ajax",
					pageNo:pageNo,
					pageSize:10,
					titleLike:key
				},
				function(result){
					//将html拼接写成方法
					showData(result);
				},"json")
		})
		//跳转
		$(document).on("click",".trunto",function(){
			var pageNo=$("#turntoId").text();
			//获取末页值
			var totalPage=$("#totalPage").text();
			//发送ajax请求
			$.get("${pageContext.request.contextPath}/BusController",
				{
					op:"busByPage_ajax",
					pageNo:pageNo,
					pageSize:10,
					titleLike:key
				},
				function(result){
					//将html拼接写成方法
					showData(result);
				},"json")
		})
	   //模态框提交修改的监听事件
	   $("#updatebtn").click(function(){
		   //创建对象存放修改后的数据
		   var busInfo={
				   b_id:$("#b_id").val(),
				   b_begin:$("#b_begin").val(),
				   b_end:$("#b_end").val(),
				   b_price:$("#b_price").val(),
				   data:$("#b_data").val(),
		   };
		   //发送ajax修改操作
		   $.get("${pageContext.request.contextPath}/BusController",
				{
					op:"updateBus",
					busInfo:JSON.stringify(busInfo)
				},
				function(flag){
					if(flag){
						//关闭模态框
						$("#myModal").modal('hide');
						//刷新数据,发送ajax请求,显示当前页
						$.get("${pageContext.request.contextPath}/BusController",
							{
								op:"busByPage_ajax",
								pageNo:$("#pageNo").text(),
								pageSize:10,
								titleLike:key
							},
							function(result){
								//将html拼接写成方法
								showData(result);
							},"json")
					}else{
						alert("修改失败")
					}
				},"json")

	   })
    })
    function showData(result){
		//1.每一次遍历之前需要清空
		$("#busListBody").empty();
		$("#pageStyle").empty();
		$("#pageItem").empty();
		//2.显示车辆信息列表数据
		$.each(result.data,function(index,busInfo){
			//先把tr标签复制到后端的字符串中,自动转义,复制到text中替换${    与  }
			$("#busListBody").append("<tr>\r\n" + 
					"						<td>"+busInfo.b_id+"</td>\r\n" + 
					"						<td>"+busInfo.b_begin+"</td>\r\n" + 
					"						<td>"+busInfo.b_end+"</td>\r\n" + 
					"						<td>"+busInfo.b_price+"</td>\r\n" + 
					"						<td>"+busInfo.data+"</td>\r\n" + 
					"						<td><a href=\"\" data-toggle=\"modal\" data-target=\"#myModal\"\r\n" +
					"									data-b_id=\""+busInfo.b_id +"\"\r\n" + 								
					"									data-b_begin=\""+busInfo.b_begin +"\"\r\n" + 
					"									data-b_end=\""+busInfo.b_end +"\"\r\n" + 
					"									data-b_price=\""+busInfo.b_price +"\"\r\n" + 
					"									data-b_data=\""+busInfo.data +"\" onclick=\"showUpdateData(this)\">\r\n" +
					"								<button class=\"btn btn-primary btn-xs\">\r\n" + 
					"								<i class=\"fa fa-pencil\"></i>\r\n" + 
					"								</button></a>\r\n" + 
					"								<a href=\"javascript:delFun("+busInfo.b_id +") \"><button class=\"btn btn-danger btn-xs\">\r\n" + 
					"								<i class=\"fa fa-trash-o \"></i>\r\n" + 
					"								</button></a>\r\n" + 
					"						</td>\r\n" + 
					"					 </tr>")
		});
		$("#pageStyle").append("当前第<span id='pageNo'>"+result.pageNo+"</span>页/共<span id='totalPage'>"+result.totalPage+ "</span>页/每页显示<span id='pageSize'>"+result.pageSize+"</span>条/共<span id='totalCount'>"+result.totalCount+"</span>条数据");
		//首页和上一页
		if(result.pageNo==1){
			$("#pageItem").append("<li class='disabled'><a href='#'>首页</a></li><li class='disabled'><a href='#'>&laquo;</a></li>");
		}else{
			$("#pageItem").append("<li><a href='#' class='first'>首页</a></li><li><a href='#' class='up'>&laquo;</a></li>");
		}
		//分页栏
		for(var i=1;i<=result.totalPage;i++){
			if(i==result.pageNo){
				$("#pageItem").append("<li class='active'><a href='#'>"+i+"</a></li>");
			}else{
				$("#pageItem").append("<li><a href='#' class='currentPage'>"+i+"</a></li>");
			}
		}
		//下一页和末页
		if(result.pageNo==result.totalPage){
			$("#pageItem").append("<li class='disabled'><a href='#'>&raquo;</a></li><li class='disabled'><a href='#'>末页</a></li>");
		}else{
			$("#pageItem").append("<li><a href='#' class='next'>&raquo;</a></li><li><a href='#' class='last'>末页</a></li>");
		}
		//跳转页
		$("#pageItem").append("<li><a href='#' id='turntoId'><input type='number' value='"+result.pageNo+"' min='1' max='"+result.totalPage+"' style='width: 40px;height: 20px' /></a></li>");
		$("#pageItem").append("<li><a href='#' class='turnto'>跳转</a></li>");
    }
    //在模态框显示要修改的数据
	function showUpdateData(obj) {
	    var b_id = $(obj).data("b_id");
		var b_begin = $(obj).data("b_begin");
		var b_end = $(obj).data("b_end");
		var b_price = $(obj).data("b_price");
		var data = $(obj).data("b_data");
		//显示
		$("#b_id").val(b_id);
		$("#b_begin").val(b_begin);
		$("#b_end").val(b_end);
		$("#b_price").val(b_price);
		$("#b_data").val(data);
	}
	   function delFun(b_id) {
			var flag = confirm("是否确认删除用户编号为:" + b_id);
			if (flag) {
				//发送ajax请求
				$.get("${pageContext.request.contextPath}/BusController",
					{
						op:"deleteBus",
						b_id:b_id
					},
					function(flag){
						if(flag){
							$.get("${pageContext.request.contextPath}/BusController",
									{
										op:"busByPage_ajax",
										pageNo:1,
										pageSize:10,
										titleLike:key
									},
									function(result){
										//将html拼接写成方法
										showData(result);
									},"json")
						}else{
							alert("删除失败")
						}
					},"json")
			}
		}
</script>

</html>